<template>
  <el-dialog
    :title="titleText"
    :visible.sync="editorVisible"
    width="60%"
    :before-close="handleClose"
    @close="dialogClose"
  >
    <el-form
      :model="companyDetails"
      :rules="listrules"
      ref="listFormRef"
      label-width="120px"
    >
      <el-form-item label="企业名称" prop="shortName">
        <el-input v-model="companyDetails.shortName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="companyDetails.isFamous">备选项</el-checkbox>
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="companyDetails.company"></el-input>
      </el-form-item>
      <el-form-item>
        <span>
          http://www.tianyuancha.com(在此可查询所属公司全称及简称)
        </span>
      </el-form-item>

      <el-row class="tyeRow">
        <el-form-item label="城市" prop="province">
          <el-select
            v-model="companyDetails.province"
            placeholder="请选择"
            @change="selextChange"
          >
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="city">
          <el-select v-model="companyDetails.city" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in citys"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input v-model="companyDetails.tags"></el-input>
      </el-form-item>

      <el-form-item label="活动形式" prop="remarks">
        <el-input
          type="textarea"
          v-model="companyDetails.remarks"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="change">确定</el-button>
        <el-button @click="closed">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { add, update } from "@/api/hmmm/companys.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
export default {
  computed: {
    titleText() {
      if (this.dialogue) {
        return "编辑用户";
      } else {
        return "添加用户";
      }
    }
  },
  props: {
    editorVisible: { type: Boolean, required: true },
    dialogue: { type: Boolean, required: true },
    companyDetails: { type: Object, required: true }
  },
  data() {
    return {
      // 验证规则
      listrules: {
        shortName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        tags: [{ required: true, message: "请输入企业方向", trigger: "blur" }],
        company: [
          { required: true, message: "请输入所属公司", trigger: "blur" }
        ],
        remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],
        city: [{ required: true, message: "请选择城市", trigger: "blur" }]
      },
      provinces: provinces(),
      citys: []
    };
  },
  methods: {
    handleClose() {
      this.$emit("closedialog");
    },
    closed() {
      this.$emit("closed");
    },
    dialogClose() {
      this.$refs.listFormRef.resetFields();
      // 重置form表单
    },
    selextChange(item) {
      this.citys = citys(item);
    },
    async change() {
      if (this.dialogue) {
        // 修改信息
        await update(this.companyDetails);
        this.$emit("closed");
        this.$emit("updatainfo");
      } else {
        // console.log("你好");
        // 添加新用户
        if (!this.companyDetails.isFamous) {
          this.companyDetails.isFamous = false;
        }
        await add(this.companyDetails);
        this.$emit("closed");
        this.$emit("updatainfo");
      }
    }
  }
};
</script>

<style>
.tyeRow {
  display: flex;
}
</style>
